<template>
  <div class="login">
    <form action="">
      <h3>管理员登录</h3>
      <div class="opt">
        <el-input v-model="account" placeholder="请输入内容"></el-input>
      </div>
      <div class="opt">
        <el-input v-model="password" placeholder="请输入密码"></el-input>
      </div>
      <div class="opt">
        <el-checkbox v-model="checked">是否记住密码</el-checkbox>
      </div>
      <div class="opt" @click="LoginFn">
        <el-button type="primary" style="text-align: center;">点击登录</el-button>
      </div>
    </form>


  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      input: '',
      account: '',
      password: ''
    };
  },
  methods: {
    LoginFn() {
      let account = this.account;
      let password = this.password;
      if (account == '' || password == '') {
        this.$message.error('账号或密码不能为空');
        return;
      }
      // 登录跳转逻辑
      if (account == 'admin' && password == '123456') {
        this.$message.success('登录成功');
      }
    },
    isMemory() {
      if (this.checked) {
        //记住密码复选框的逻辑
      }
    }
  }
}
</script>

<style scoped lang="less">
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background-color: pink;
  background-image: url(../assets/images/代码展示.png);
  background-size: cover;
  display: flex;
  justify-content: center;

  form {
    background-color: #fff;
    width: 335px;
    height: 250px;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    .opt {
      margin: 5px;
    }
  }
}
</style>